"use client";

import React from 'react';
import { Button } from 'antd';
import Image from 'next/image';

const Header: React.FC = () => {
  return (
    <header className="flex justify-between items-center py-4 px-6 md:px-12 bg-white">
      <div className="flex items-center">
        <Image 
          src="/images/logo.png" 
          alt="Nemo Video" 
          width={120} 
          height={40} 
          priority
        />
      </div>
      <div className="flex items-center space-x-6">
        <div className="hidden md:block">
          <select 
            className="bg-transparent border-none focus:outline-none"
            style={{
              color: '#4E5469',
              fontSize: '16px',
              fontWeight: 'normal',
              appearance: 'none',
              paddingRight: '1.5rem',
              backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%234E5469'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E")`,
              backgroundRepeat: 'no-repeat',
              backgroundPosition: 'right center',
              backgroundSize: '1rem'
            }}
            defaultValue="English"
          >
            <option value="English">English</option>
            <option value="中文">中文</option>
          </select>
        </div>
        
        <Button 
          type="primary" 
          className="bg-[#7145FE] hover:bg-[#7145FE]/90 border-none w-[111px] h-[36px] flex items-center justify-center rounded-[8px]"
          style={{
            fontSize: '16px',
            fontWeight: 'normal',
            lineHeight: '1',
            padding: 0,
            backgroundColor: '#7145FE'
          }}
        >
          <span className="text-white">Get started</span>
        </Button>
      </div>
    </header>
  );
};

export default Header; 